const tableEle = document.querySelector("table");
let Allcheked = false;
function CartTable() {
  let Arr = JSON.parse(localStorage.getItem("CartList")); //把存储的数据拿出来
  let str = `
    <tr>
    <th><input type="checkbox" name="" id="" class="checkbox-all" ${
      Allcheked == true ? "checked" : ""
    }>全选</th>
    <th>商品编号</th>
    <th>商品图片</th>
    <th>商品信息</th>
    <th>单价</th>
    <th>数量</th>
    <th>总价</th>
    <th>操作</th>
</tr>
    `;
  Arr.forEach((item, index) => {
    str += `
       <tr>
       <td><input type="checkbox" name="" id="" class="checkbox-item" ${
         item.state == true ? "checked" : ""
       } ></td>
       <td>${item.id}</td>
       <td><img src="${item.img}"></td>
       <td>${item.name}</td>
       <td class="singer">￥${item.price}</td>
       <td><input type="button" name="minus" value="-" class="minus" ${
         item.num > 0 ? "" : "disabled"
       }>
           <input type="text" name="amount" value="${
             item.num
           }"  class="amount"   >
           <input type="button" name="plus" value="+"   class="plus"></td>
       <td  class="all">￥${item.singlePrice}</td>
       <td><a href="#"  class="a">移入收藏</a><br><a href="#"class="del" date-index='${index}'  >删除</a></td>
   </tr> 
       `;
  });
  tableEle.innerHTML = str;
}
CartTable();
tableEle.addEventListener("click", (e) => {
  e = e || window.event;
  let target = e.target || e.srcElement;
  //删除
  if (target.getAttribute("class") == "del") {
    let Arr = JSON.parse(localStorage.getItem("CartList")); //把存储的数据拿出来
    console.log(Arr);
    let index = target.getAttribute("date-index");
    console.log(index);
    Arr.splice(index, 1);
    localStorage.setItem("CartList", JSON.stringify(Arr));
    CartTable();
    AllPrice();
  }
  //加号
  if (target.getAttribute("class") == "plus") {
    let Arr = JSON.parse(localStorage.getItem("CartList"));
    console.log(Arr);
    let id =
      target.parentElement.parentElement.firstElementChild.nextElementSibling
        .innerHTML;
    console.log(id);
    let newProduct = Arr.find((item) => item.id == id);
    console.log(newProduct);
    newProduct.num++;
    newProduct.singlePrice = (newProduct.num * newProduct.price).toFixed(2);
    localStorage.setItem("CartList", JSON.stringify(Arr));
    CartTable();
    AllPrice();
  }
  //减号
  if (target.getAttribute("class") == "minus") {
    let Arr = JSON.parse(localStorage.getItem("CartList"));
    console.log(Arr);
    let id =
      target.parentElement.parentElement.firstElementChild.nextElementSibling
        .innerHTML;
    console.log(id);
    let newProduct = Arr.find((item) => item.id == id);
    console.log(newProduct);
    console.log(newProduct.num);
    if (newProduct.num < 1) {
      newProduct.num = 0;
    } else {
      newProduct.num--;
      console.log(newProduct.num);
      newProduct.singlePrice = (newProduct.num * newProduct.price).toFixed(2);
      localStorage.setItem("CartList", JSON.stringify(Arr));
      CartTable();
      AllPrice();
    }
  }
  //全选
  if (target.getAttribute("class") == "checkbox-all") {
    let Arr = JSON.parse(localStorage.getItem("CartList"));
    console.log(Arr)
    Allcheked = !Allcheked;
    console.log(Allcheked);
    if (Allcheked == true) {
      Arr.forEach((item) => {
        item.state = true;
        console.log(item.state)
      });
    } else {
      Arr.forEach((item) => {
        item.state = false;
      });
    }
    localStorage.setItem('CartList',JSON.stringify(Arr))
    CartTable();
    AllPrice();
  }
  //单选
  if(target.getAttribute('class')=="checkbox-item"){
    let Arr=JSON.parse(localStorage.getItem('CartList'))
    let id=target.parentElement.nextElementSibling.innerHTML
    console.log(id)
    let newProduct=Arr.find(item=>item.id==id)
    console.log(newProduct)
    newProduct.state=!newProduct.state
    Allcheked=Arr.every(item=>item.state==true)
    localStorage.setItem('CartList',JSON.stringify(Arr))
    CartTable();
    AllPrice();
  }
});
//总价
let spanEle = document.querySelector(".span");
function AllPrice() {
  let Arr = JSON.parse(localStorage.getItem("CartList"));

  let totalPrice = Arr.reduce((s, item) => {
    return (s += Number(item.singlePrice));
  }, 0);
  spanEle.innerHTML = totalPrice;
}
AllPrice();
